* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*::before,
*::after {
    box-sizing: border-box;
}

ul,
ol {
    list-style: none;
}

a{text-decoration: none; color:inherit}
img{
   max-width: 100% ;max-height: 100%; 
}
/*
  body的background会智能把整个网页变色,看边界加border
*/
body {
    background-color: #eee;
}
@media (max-width:321px){
     .globalMain .siteList >li .site{
    
        width: 120px;
      }
      .globalMain .last .addButton{
          width: 120px;
      }
}
@media (max-width:361px){
   
    .siteList >li .site{
    
      width: 140px;
    }
    .last .addButton{
        width: 140px;
    }
}
@media (min-width:500px){
  .globalHeader{
      margin-top: 50px;
      margin-bottom: 60px;
      max-width: 400px;
      margin-left: auto;
      margin-right: auto;
  }
  .globalMain{
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      
  }
  .globalMain .siteList {
     
      margin-left:0;
      margin-right:-25px;
      justify-content: flex-start;
  }
  .globalMain .siteList >li{
    margin-right: 25px;
}

 
 
}
.searchForm {

    margin: 20px;
    display: flex;
    justify-content: space-between;
  
}

.searchForm>input {
    width: 100%;
    height: 40px;
    margin-right: 10px;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.searchForm>button {
    padding: 0 23px;
    white-space: nowrap;
    border: none;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #0A7EB0;
    color: #fff;
    font-size: 16px;
}

.globalMain {}

.siteList {
   
    margin: 20px;
    display: flex;
    justify-content: space-between;   
    flex-wrap: wrap;
  
}

.globalMain li {
    
    position: relative;
    margin-bottom: 10px;
    border-radius: 4px;
    
}

.globalMain .site {
    background-color: #fff;
    width: 160px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px 0;
    align-items: center;

}

.globalMain .site .logo {

    width: 64px;
    height: 64px;
    font-size: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.globalMain .site .link {
    margin-top: 10px;
}

.addButton {
    background-color: #fff;
    width: 160px;
  
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:20px 0;
}
.icon-wrapper .icon{
    width: 64px;
    height: 64px;
}
.addButton .icon-wrapper{
 
    display: flex;
    justify-content: center;
}
.addButton .txt{
    margin-top: 10px;
}
.siteList li .delete{
    display: none;
}
.siteList li:hover .delete{
    position: absolute;
    top:5px;
    right:5px;
    display: block;
    
}